<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行高与对齐</title>
    <style>
        .d1 {
            font-size: 40px;
            background-color: skyblue;
            /*行高是用鼠标点击文字，然后呈现的蓝色背景,行与行之间其实是仅仅贴在一起的*/
            /*若行高和字体一样都是40px就会挤在一起,所以千万不能设置成一样*/
            //line-height: 40px;
            /*若不写line-height就是默认的normal,浏览器会更具字体大小自己选中合适行高*/
            //line-height: normal;
            /*写成1.5或者1.667最好,是font-size的倍数*/
            line-height: 1.667;

            /*行高很小上面文字会被吃掉，背景颜色会消失，最小值为0,不能是负数*/
            /*行高可以被继承*/
        }

        /*行高取决与一行中最高的行高*/
        .d1 > span {
            font-size: 200px;
            line-height: 300px;
        }

        .d2 {
            /*height是指div的高度,写了height高度就是height设置的值，没设置就是 行数x行高，行高为0height就是0了，背景色就消失 */
            /*line-height是里面文字行高*/
            /*line-height>height会出现溢出现象*/
            background-color: skyblue;
            font-size: 40px;
            line-height: 300px;
            height: 100px;
        }

        /*行高应用场景一：调整多行文字的间距，场景二，单行文字的垂直居中(行高=height,但是仅仅限于单行，使用的少)*/


        .d4 {
            font-size: 40px;
            background-color: skyblue;
            height: 400px;
        }

        .d4 > span {
            background-color: orange;
            font-size: 30px;
            /*默认值baseline*/
            vertical-align: top;
        }
        .d5 {
            font-size: 40px;
            background-color: skyblue;
            height: 300px;
        }
        .d5 img{
            /*照片高于文字之后，行高取一行最大的那么就是照片的高了，然后这个时候对齐动的是文字*/
            height: 60px;
            vertical-align: top;
        }
        .d6{
            height: 400px;
            font-size: 40px;
            background-color: green;
        }
        .d6>span{
            /*va不能控制块元素*/
            /*va只操作行内元素,一行内的元素对齐，不是说span在div里面垂直对齐*/
            /*va也可以指定表格单元格元素对齐方式*/

            font-size: 30px;
        }
        .sp1{
            /*va通常是一行内多个行内元素大小不同，然后设置对齐方式*/
            font-size: 30px;
            vertical-align: top;
        }
        .sp2{
            font-size: 60px;
        }

    </style>
</head>
<body>
<!--    <div class="d1">尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅asdasdadasda谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2</div>-->
<!--    <div class="d3">尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷t1尚硅谷t</div>-->
<!--<div class="d4">尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t1尚硅谷t2硅谷x<span>xt1尚硅谷t</span></div>-->
<div class="d5">尚硅谷t1尚硅谷t1尚硅谷t1尚<img height="30" src="./选择器优先级简单理解.png"></div>
<!--<div class="d6"> 1111111111</div>-->
<div class="d7" style="background-color: green"> <span class="sp1">span1</span><span class="sp2">span2</span></div>
</body>
</html>